<template>
  <div class="print-wrap" style="width: 100%; height: 100%">
    <div class="title flex">
      <h1 class="flex-sub">发货计划捡货单预配报表</h1>
      <div class="qrcode">
        <div :id="'qrcode1'"></div>
      </div>
    </div>
    <div class="flex margin-top20">
      <span class="flex-sub">客户：{{ drawQr.customerName }}</span>
      <span class="flex-sub">发货日期：{{ drawQr.requiredArrivalTime }}</span>
      <span class="flex-sub">单据号：{{ drawQr.deliveryplanNo }}</span>
    </div>
    <div class="table-box">
      <el-table class="table-in" :data="drawQr.newList" border >
        <el-table-column prop="customerPoNo" label="PO/订单号" width='120'>
        </el-table-column>
        <el-table-column prop="materialCode" label="物料编号" width='120'>
        </el-table-column>
        <el-table-column prop="stageEdition" label="物料版本" >
        </el-table-column>
         <el-table-column prop="batchNo" label="批次">
        </el-table-column>
        <el-table-column prop="num" label="箱数" >
        </el-table-column>
        <el-table-column prop="snp" label="包装方式" >
        </el-table-column>
        <el-table-column prop="lastBoxQuantity" label="尾箱数量" >
        </el-table-column>
        <el-table-column prop="sparePartsNumber" label="备品">
        </el-table-column>
        <el-table-column prop="materialQty" label="需求总数" >
        </el-table-column>
        <el-table-column prop="unitName" label="单位">
        </el-table-column>
        <el-table-column prop="loactionNo" label="库位">
        </el-table-column>
        <el-table-column prop="memo" label="备注">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
   

<script>
import QRcode from "qrcodejs2";

export default {
  components: {},
  props: {
    drawQr: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.qrcode();
    });
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    qrcode() {
      document.getElementById(`qrcode1`).innerHTML = "";
      let qrcode = new QRcode(`qrcode1`, {
        width: 140,
        height: 140,
        text: this.drawQr.deliveryplanNo,
      });
    },
  },
  watch: {
    drawQr: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.qrcode();
          });
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@page {
  // size: 210mm 297mm !important;
  size: 297mm 210mm !important;
  // size: A4 portrait !important;
  margin: 20px;
}
.print-wrap {
  .title {
    height: 160px;
    line-height: 160px;
    text-align: center;
  }
  .margin-top20{
    margin-top: 20px;
  }
}
.table-box {
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  .table-in{
    width: 100%;
    // transform: scale(0.8);
  }
}
.el-table--group,
.el-table--border {
  border: none !important;
}
/deep/table tr td,
/deep/table th {
  border: 1px solid #999 !important;
  font-size: 12px !important;
}
/deep/table th {
  border-bottom: none !important;
  font-size: 12px !important;
}
/deep/table,
/deep/table tr:last-child {
  border-bottom: 1px solid #000 !important;
  font-size: 12px !important;
}

.qrcode {
  padding: 30px 30px 30px 0px;
}

.print {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.printText {
  text-align: center;
  font-size: 10px;
  margin-top: 10px;
}
</style>
